<template>
  <div class="yingxiong">
    <ul class="menu">
      <li class="listBtn" v-for="(item, index) in pageList" data-Item="index" @click.stop.prevent="checkMenu(index)"></li>
    </ul>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in pageList">
          <page-item :pageClass="item.pageClass" :pageIndex="item.pageIndex" :dataList="item.dataList"></page-item>
        </div>
      </div>
    </div>
    <div class="swiper-button-next" ref="nextBtn">
      <img src="~assets/images/right.png" alt="">
    </div>
    <div class="swiper-button-prev">
      <img src="~assets/images/left.png" alt="">
    </div>
  </div>
</template>

<script>
  import SessionDAO from 'common/sessionDAO'
  import RemoteDAO from 'common/RemoteDAO'
  import {toFixed} from 'common/common.util'
  import Swiper from 'swiper'
  import PageItem from 'components/yingxiong/PageItem'
  export default {
    data () {
      return {
        mySwiper: '',
        pageList: [
          {
            pageClass: 'page1',
            pageIndex: 1,
            dataList: []
          },
          {
            pageClass: 'page2',
            pageIndex: 2,
            dataList: []
          },
          {
            pageClass: 'page3',
            pageIndex: 3,
            dataList: []
          }
        ],
        isRequesting: false
      }
    },
    components: {
      PageItem
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        let params = {
          listType: 1
        }
        this.getData(params)
        this.initSwiper()
      },
      reGetData (index) {
        let listType = index + 1
        let params = {
          listType: listType
        }
        if (Number(listType) === 1) {
          this.maidian('23010')
        } else if (Number(listType) === 2) {
          this.maidian('23011')
          if (SessionDAO.getUserCode() && this.$store.state.gameId) {
            Object.assign(params, {
              gameId: this.$store.state.gameId
            })
          }
        } else if (Number(listType) === 3) {
          this.maidian('23012')
        }
        this.getData(params)
      },
      getData (params) {
        let vm = this
        if (vm.isRequesting === false) {
          vm.isRequesting === true
          RemoteDAO.getNrngHeroList(params).then(response => {
            vm.isRequesting === false
            vm.callBack(response)
          })
        }
      },
      callBack (response) {
        let list = response.data.nrngHeroList
        let requireLength = 10
        if (list.length > 0) {
          let listType = Number(JSON.parse(list[0]).listType)
          if (listType === 1) {
            requireLength = 4
            this.pageList[0].dataList = this.transformData(list, requireLength)
          } else if (listType === 2) {
            this.pageList[1].dataList = this.transformData(list, requireLength)
          } else if (listType === 3) {
            this.pageList[2].dataList = this.transformData(list, requireLength)
          }
        }
      },
      transformData (list, requireLength) {
        list = list || []
        if (list.length > 0) {
          for (let i = 0; i < list.length; i++) {
            list[i] = JSON.parse(list[i])
            Object.assign(list[i], {
              listProfit: toFixed(list[i].listProfit, 2) + '%'
            })
          }
        }
        if (list.length > requireLength) {
          list = list.slice(0, requireLength)
        }
        return list
      },
      initSwiper () {
        let vm = this
        this.$nextTick(() => {
          this.mySwiper = new Swiper('.yingxiong .swiper-container', {
            direction: 'horizontal',
            effect: 'fade',
            fade: {
              crossFade: true
            },
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            onSlideChangeEnd: function (swiper, event) {
              vm.reGetData(swiper.activeIndex)
            }
          })
        })
      },
      checkMenu (index) {
        this.mySwiper.slideTo(index)
      },
      maidian (tdId, kv) {
        kv = kv || {}
        let TDAPP = window.TDAPP
        TDAPP.onEvent(tdId, '', kv)
        TDAPP.send()
      }
    }
  }
</script>
